<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OpenHarmony 三方库适配中心</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>🚀 openHarmony_Cordova_NutpiDesign 三方库</h1>
            <p class="subtitle">高级组件库 | 30+ 精选组件 | 开箱即用</p>
        </header>

        <main class="main-content">
            <!-- 搜索和筛选 -->
            <div class="search-bar">
                <input type="text" id="componentSearch" class="search-input" placeholder="搜索组件...">
            </div>

            <!-- 组件网格 -->
            <section class="components-grid">
                <!-- v1.0.0 - 数据表格 -->
                <div class="component-card" data-version="v1.0.0">
                    <div class="card-header">
                        <span class="version-badge">v1.0.0</span>
                        <span class="status-badge new">新</span>
                    </div>
                    <h3 class="card-title">📊 数据表格</h3>
                    <p class="card-description">高性能数据表格组件，支持排序、搜索、分页、导出等功能</p>
                    <div class="card-features">
                        <span class="feature-tag">排序</span>
                        <span class="feature-tag">搜索</span>
                        <span class="feature-tag">分页</span>
                        <span class="feature-tag">导出</span>
                    </div>
                    <div class="card-footer">
                        <a href="demo/table.html" class="btn btn-primary">查看演示</a>
                        <a href="blog-articles/v1.0.0-数据表格组件.md" class="btn btn-secondary" target="_blank">阅读文章</a>
                    </div>
                </div>

                <!-- v1.1.0 - 图表库 -->
                <div class="component-card" data-version="v1.1.0">
                    <div class="card-header">
                        <span class="version-badge">v1.1.0</span>
                        <span class="status-badge new">新</span>
                    </div>
                    <h3 class="card-title">📈 图表库</h3>
                    <p class="card-description">支持柱状图、折线图、饼图等多种图表类型，基于 Canvas 高性能渲染</p>
                    <div class="card-features">
                        <span class="feature-tag">柱状图</span>
                        <span class="feature-tag">折线图</span>
                        <span class="feature-tag">饼图</span>
                        <span class="feature-tag">实时更新</span>
                    </div>
                    <div class="card-footer">
                        <a href="demo/chart.html" class="btn btn-primary">查看演示</a>
                        <a href="blog-articles/v1.1.0-图表库组件.md" class="btn btn-secondary" target="_blank">阅读文章</a>
                    </div>
                </div>

                <!-- v1.2.0 - 弹窗组件 -->
                <div class="component-card" data-version="v1.2.0">
                    <div class="card-header">
                        <span class="version-badge">v1.2.0</span>
                        <span class="status-badge new">新</span>
                    </div>
                    <h3 class="card-title">🎯 弹窗组件</h3>
                    <p class="card-description">灵活的弹窗组件，支持提示、确认、成功、错误等多种类型</p>
                    <div class="card-features">
                        <span class="feature-tag">模态框</span>
                        <span class="feature-tag">确认框</span>
                        <span class="feature-tag">提示框</span>
                        <span class="feature-tag">动画效果</span>
                    </div>
                    <div class="card-footer">
                        <a href="demo/modal.html" class="btn btn-primary">查看演示</a>
                        <a href="blog-articles/v1.2.0-弹窗组件.md" class="btn btn-secondary" target="_blank">阅读文章</a>
                    </div>
                </div>

                <!-- v1.3.0 - 日期选择器 -->
                <div class="component-card" data-version="v1.3.0">
                    <div class="card-header">
                        <span class="version-badge">v1.3.0</span>
                        <span class="status-badge new">新</span>
                    </div>
                    <h3 class="card-title">📅 日期选择器</h3>
                    <p class="card-description">功能完整的日期选择组件，支持单日期和范围选择</p>
                    <div class="card-features">
                        <span class="feature-tag">日期选择</span>
                        <span class="feature-tag">范围选择</span>
                        <span class="feature-tag">快捷选项</span>
                        <span class="feature-tag">日期限制</span>
                    </div>
                    <div class="card-footer">
                        <a href="demo/datepicker.html" class="btn btn-primary">查看演示</a>
                        <a href="blog-articles/v1.3.0-日期选择器组件.md" class="btn btn-secondary" target="_blank">阅读文章</a>
                    </div>
                </div>

                <!-- v1.4.0 - 下拉菜单 -->
                <div class="component-card" data-version="v1.4.0">
                    <div class="card-header">
                        <span class="version-badge">v1.4.0</span>
                        <span class="status-badge new">新</span>
                    </div>
                    <h3 class="card-title">📋 下拉菜单</h3>
                    <p class="card-description">功能完整的下拉菜单组件，支持单选、多选和搜索</p>
                    <div class="card-features">
                        <span class="feature-tag">单选</span>
                        <span class="feature-tag">多选</span>
                        <span class="feature-tag">搜索</span>
                        <span class="feature-tag">分组</span>
                    </div>
                    <div class="card-footer">
                        <a href="demo/dropdown.html" class="btn btn-primary">查看演示</a>
                        <a href="blog-articles/v1.4.0-下拉菜单组件.md" class="btn btn-secondary" target="_blank">阅读文章</a>
                    </div>
                </div>

                <!-- v1.5.0 - 文件上传 -->
                <div class="component-card" data-version="v1.5.0">
                    <div class="card-header">
                        <span class="version-badge">v1.5.0</span>
                        <span class="status-badge new">新</span>
                    </div>
                    <h3 class="card-title">📤 文件上传</h3>
                    <p class="card-description">功能完整的文件上传组件，支持拖拽、多文件和进度显示</p>
                    <div class="card-features">
                        <span class="feature-tag">拖拽上传</span>
                        <span class="feature-tag">多文件</span>
                        <span class="feature-tag">进度条</span>
                        <span class="feature-tag">文件预览</span>
                    </div>
                    <div class="card-footer">
                        <a href="demo/upload.html" class="btn btn-primary">查看演示</a>
                        <a href="blog-articles/v1.5.0-文件上传组件.md" class="btn btn-secondary" target="_blank">阅读文章</a>
                    </div>
                </div>

                <!-- v1.6.0 - 标签 -->
                <div class="component-card" data-version="v1.6.0">
                    <div class="card-header">
                        <span class="version-badge">v1.6.0</span>
                        <span class="status-badge new">新</span>
                    </div>
                    <h3 class="card-title">🏷️ 标签</h3>
                    <p class="card-description">功能完整的标签组件，支持多种类型、大小和动态管理</p>
                    <div class="card-features">
                        <span class="feature-tag">多种类型</span>
                        <span class="feature-tag">可关闭</span>
                        <span class="feature-tag">标签输入</span>
                        <span class="feature-tag">动态管理</span>
                    </div>
                    <div class="card-footer">
                        <a href="demo/tag.html" class="btn btn-primary">查看演示</a>
                        <a href="blog-articles/v1.6.0-标签组件.md" class="btn btn-secondary" target="_blank">阅读文章</a>
                    </div>
                </div>

                <!-- v1.7.0 - 进度条 -->
                <div class="component-card" data-version="v1.7.0">
                    <div class="card-header">
                        <span class="version-badge">v1.7.0</span>
                        <span class="status-badge new">新</span>
                    </div>
                    <h3 class="card-title">📊 进度条</h3>
                    <p class="card-description">功能完整的进度条组件，支持线性、圆形和步骤条</p>
                    <div class="card-features">
                        <span class="feature-tag">线性进度条</span>
                        <span class="feature-tag">圆形进度条</span>
                        <span class="feature-tag">步骤条</span>
                        <span class="feature-tag">多种状态</span>
                    </div>
                    <div class="card-footer">
                        <a href="demo/progress.html" class="btn btn-primary">查看演示</a>
                        <a href="blog-articles/v1.7.0-进度条组件.md" class="btn btn-secondary" target="_blank">阅读文章</a>
                    </div>
                </div>

                <!-- v1.8.0 - 加载动画 -->
                <div class="component-card" data-version="v1.8.0">
                    <div class="card-header">
                        <span class="version-badge">v1.8.0</span>
                        <span class="status-badge new">新</span>
                    </div>
                    <h3 class="card-title">⏳ 加载动画</h3>
                    <p class="card-description">功能完整的加载动画组件，支持多种动画类型</p>
                    <div class="card-features">
                        <span class="feature-tag">多种动画</span>
                        <span class="feature-tag">全屏加载</span>
                        <span class="feature-tag">自定义颜色</span>
                        <span class="feature-tag">加载文字</span>
                    </div>
                    <div class="card-footer">
                        <a href="demo/loading.html" class="btn btn-primary">查看演示</a>
                        <a href="blog-articles/v1.8.0-加载动画组件.md" class="btn btn-secondary" target="_blank">阅读文章</a>
                    </div>
                </div>

                <!-- v1.9.0 - 分页 -->
                <div class="component-card" data-version="v1.9.0">
                    <div class="card-header">
                        <span class="version-badge">v1.9.0</span>
                        <span class="status-badge new">新</span>
                    </div>
                    <h3 class="card-title">📄 分页</h3>
                    <p class="card-description">功能完整的分页组件，支持多种样式和交互方式</p>
                    <div class="card-features">
                        <span class="feature-tag">上下页按钮</span>
                        <span class="feature-tag">页码选择</span>
                        <span class="feature-tag">数量选择</span>
                        <span class="feature-tag">跳转功能</span>
                    </div>
                    <div class="card-footer">
                        <a href="demo/pagination.html" class="btn btn-primary">查看演示</a>
                        <a href="blog-articles/v1.9.0-分页组件.md" class="btn btn-secondary" target="_blank">阅读文章</a>
                    </div>
                </div>

                <!-- v1.10.0 - 轮播 -->
                <div class="component-card" data-version="v1.10.0">
                    <div class="card-header">
                        <span class="version-badge">v1.10.0</span>
                        <span class="status-badge new">新</span>
                    </div>
                    <h3 class="card-title">🎠 轮播</h3>
                    <p class="card-description">功能完整的轮播组件，支持自动播放和手动切换</p>
                    <div class="card-features">
                        <span class="feature-tag">自动播放</span>
                        <span class="feature-tag">手动切换</span>
                        <span class="feature-tag">指示器</span>
                        <span class="feature-tag">流畅动画</span>
                    </div>
                    <div class="card-footer">
                        <a href="demo/carousel.html" class="btn btn-primary">查看演示</a>
                        <a href="blog-articles/v1.10.0-轮播组件.md" class="btn btn-secondary" target="_blank">阅读文章</a>
                    </div>
                </div>

                <!-- v1.11.0 - 抽屉 -->
                <div class="component-card" data-version="v1.11.0">
                    <div class="card-header">
                        <span class="version-badge">v1.11.0</span>
                        <span class="status-badge new">新</span>
                    </div>
                    <h3 class="card-title">🎯 抽屉</h3>
                    <p class="card-description">功能完整的抽屉组件，支持多个方向和自定义大小</p>
                    <div class="card-features">
                        <span class="feature-tag">多个方向</span>
                        <span class="feature-tag">自定义大小</span>
                        <span class="feature-tag">遮罩层</span>
                        <span class="feature-tag">流畅动画</span>
                    </div>
                    <div class="card-footer">
                        <a href="demo/drawer.html" class="btn btn-primary">查看演示</a>
                        <a href="blog-articles/v1.11.0-抽屉组件.md" class="btn btn-secondary" target="_blank">阅读文章</a>
                    </div>
                </div>

                <!-- v1.12.0 - 气泡卡片 -->
                <div class="component-card" data-version="v1.12.0">
                    <div class="card-header">
                        <span class="version-badge">v1.12.0</span>
                        <span class="status-badge new">新</span>
                    </div>
                    <h3 class="card-title">💬 气泡卡片</h3>
                    <p class="card-description">功能完整的气泡卡片组件，支持多个方向和触发方式</p>
                    <div class="card-features">
                        <span class="feature-tag">多个方向</span>
                        <span class="feature-tag">悬停/点击</span>
                        <span class="feature-tag">箭头指示</span>
                        <span class="feature-tag">自动调整</span>
                    </div>
                    <div class="card-footer">
                        <a href="demo/popover.html" class="btn btn-primary">查看演示</a>
                        <a href="blog-articles/v1.12.0-气泡卡片组件.md" class="btn btn-secondary" target="_blank">阅读文章</a>
                    </div>
                </div>

                <!-- v1.13.0 - 评分 -->
                <div class="component-card" data-version="v1.13.0">
                    <div class="card-header">
                        <span class="version-badge">v1.13.0</span>
                        <span class="status-badge new">新</span>
                    </div>
                    <h3 class="card-title">⭐ 评分</h3>
                    <p class="card-description">功能完整的评分组件，支持星级评分和半星</p>
                    <div class="card-features">
                        <span class="feature-tag">星级评分</span>
                        <span class="feature-tag">半星支持</span>
                        <span class="feature-tag">多种大小</span>
                        <span class="feature-tag">实时反馈</span>
                    </div>
                    <div class="card-footer">
                        <a href="demo/rating.html" class="btn btn-primary">查看演示</a>
                        <a href="blog-articles/v1.13.0-评分组件.md" class="btn btn-secondary" target="_blank">阅读文章</a>
                    </div>
                </div>

                <!-- v1.14.0 - 时间轴 -->
                <div class="component-card" data-version="v1.14.0">
                    <div class="card-header">
                        <span class="version-badge">v1.14.0</span>
                        <span class="status-badge new">新</span>
                    </div>
                    <h3 class="card-title">📅 时间轴</h3>
                    <p class="card-description">功能完整的时间轴组件，支持多个方向和布局模式</p>
                    <div class="card-features">
                        <span class="feature-tag">垂直/水平</span>
                        <span class="feature-tag">多种布局</span>
                        <span class="feature-tag">自定义样式</span>
                        <span class="feature-tag">动态操作</span>
                    </div>
                    <div class="card-footer">
                        <a href="demo/timeline.html" class="btn btn-primary">查看演示</a>
                        <a href="blog-articles/v1.14.0-时间轴组件.md" class="btn btn-secondary" target="_blank">阅读文章</a>
                    </div>
                </div>

                <!-- v1.15.0 - 步骤条 -->
                <div class="component-card" data-version="v1.15.0">
                    <div class="card-header">
                        <span class="version-badge">v1.15.0</span>
                        <span class="status-badge new">新</span>
                    </div>
                    <h3 class="card-title">👣 步骤条</h3>
                    <p class="card-description">功能完整的步骤条组件，支持水平/垂直方向和多种状态</p>
                    <div class="card-features">
                        <span class="feature-tag">水平/垂直</span>
                        <span class="feature-tag">多种状态</span>
                        <span class="feature-tag">多种大小</span>
                        <span class="feature-tag">禁用状态</span>
                    </div>
                    <div class="card-footer">
                        <a href="demo/steps.html" class="btn btn-primary">查看演示</a>
                        <a href="blog-articles/v1.15.0-步骤条组件.md" class="btn btn-secondary" target="_blank">阅读文章</a>
                    </div>
                </div>

                <!-- v1.16.0 - 面包屑 -->
                <div class="component-card" data-version="v1.16.0">
                    <div class="card-header">
                        <span class="version-badge">v1.16.0</span>
                        <span class="status-badge new">新</span>
                    </div>
                    <h3 class="card-title">🍞 面包屑</h3>
                    <p class="card-description">功能完整的面包屑组件，支持自定义分隔符和自动截断</p>
                    <div class="card-features">
                        <span class="feature-tag">自定义分隔符</span>
                        <span class="feature-tag">链接支持</span>
                        <span class="feature-tag">自动截断</span>
                        <span class="feature-tag">点击事件</span>
                    </div>
                    <div class="card-footer">
                        <a href="demo/breadcrumb.html" class="btn btn-primary">查看演示</a>
                        <a href="blog-articles/v1.16.0-面包屑组件.md" class="btn btn-secondary" target="_blank">阅读文章</a>
                    </div>
                </div>

                <!-- v1.17.0 - 徽章 -->
                <div class="component-card" data-version="v1.17.0">
                    <div class="card-header">
                        <span class="version-badge">v1.17.0</span>
                        <span class="status-badge new">新</span>
                    </div>
                    <h3 class="card-title">🏷️ 徽章</h3>
                    <p class="card-description">功能完整的徽章组件，支持多种类型和计数显示</p>
                    <div class="card-features">
                        <span class="feature-tag">多种类型</span>
                        <span class="feature-tag">计数显示</span>
                        <span class="feature-tag">点状徽章</span>
                        <span class="feature-tag">多个位置</span>
                    </div>
                    <div class="card-footer">
                        <a href="demo/badge.html" class="btn btn-primary">查看演示</a>
                        <a href="blog-articles/v1.17.0-徽章组件.md" class="btn btn-secondary" target="_blank">阅读文章</a>
                    </div>
                </div>

                <!-- v1.18.0 - 标记 -->
                <div class="component-card" data-version="v1.18.0">
                    <div class="card-header">
                        <span class="version-badge">v1.18.0</span>
                        <span class="status-badge new">新</span>
                    </div>
                    <h3 class="card-title">📌 标记</h3>
                    <p class="card-description">功能完整的标记组件，支持多种类型和自定义颜色</p>
                    <div class="card-features">
                        <span class="feature-tag">多种类型</span>
                        <span class="feature-tag">自定义颜色</span>
                        <span class="feature-tag">可关闭</span>
                        <span class="feature-tag">多种大小</span>
                    </div>
                    <div class="card-footer">
                        <a href="demo/mark.html" class="btn btn-primary">查看演示</a>
                        <a href="blog-articles/v1.18.0-标记组件.md" class="btn btn-secondary" target="_blank">阅读文章</a>
                    </div>
                </div>

                <!-- v1.19.0 - 提示 -->
                <div class="component-card" data-version="v1.19.0">
                    <div class="card-header">
                        <span class="version-badge">v1.19.0</span>
                        <span class="status-badge new">新</span>
                    </div>
                    <h3 class="card-title">💬 提示</h3>
                    <p class="card-description">功能完整的提示组件，支持多个方向和触发方式</p>
                    <div class="card-features">
                        <span class="feature-tag">多个方向</span>
                        <span class="feature-tag">多种触发</span>
                        <span class="feature-tag">两种主题</span>
                        <span class="feature-tag">自动定位</span>
                    </div>
                    <div class="card-footer">
                        <a href="demo/tooltip.html" class="btn btn-primary">查看演示</a>
                        <a href="blog-articles/v1.19.0-提示组件.md" class="btn btn-secondary" target="_blank">阅读文章</a>
                    </div>
                </div>

                <!-- v1.20.0 - 骨架屏 -->
                <div class="component-card" data-version="v1.20.0">
                    <div class="card-header">
                        <span class="version-badge">v1.20.0</span>
                        <span class="status-badge new">新</span>
                    </div>
                    <h3 class="card-title">💀 骨架屏</h3>
                    <p class="card-description">功能完整的骨架屏组件，支持多种类型和动画</p>
                    <div class="card-features">
                        <span class="feature-tag">多种类型</span>
                        <span class="feature-tag">脉冲动画</span>
                        <span class="feature-tag">多种大小</span>
                        <span class="feature-tag">灵活配置</span>
                    </div>
                    <div class="card-footer">
                        <a href="demo/skeleton.html" class="btn btn-primary">查看演示</a>
                        <a href="blog-articles/v1.20.0-骨架屏组件.md" class="btn btn-secondary" target="_blank">阅读文章</a>
                    </div>
                </div>

                <!-- v1.21.0 - 空状态 -->
                <div class="component-card" data-version="v1.21.0">
                    <div class="card-header">
                        <span class="version-badge">v1.21.0</span>
                        <span class="status-badge new">新</span>
                    </div>
                    <h3 class="card-title">📭 空状态</h3>
                    <p class="card-description">功能完整的空状态组件，支持多种类型和操作按钮</p>
                    <div class="card-features">
                        <span class="feature-tag">多种类型</span>
                        <span class="feature-tag">操作按钮</span>
                        <span class="feature-tag">自定义内容</span>
                        <span class="feature-tag">多种大小</span>
                    </div>
                    <div class="card-footer">
                        <a href="demo/empty.html" class="btn btn-primary">查看演示</a>
                        <a href="blog-articles/v1.21.0-空状态组件.md" class="btn btn-secondary" target="_blank">阅读文章</a>
                    </div>
                </div>

                <!-- v1.22.0 - 确认框 -->
                <div class="component-card" data-version="v1.22.0">
                    <div class="card-header">
                        <span class="version-badge">v1.22.0</span>
                        <span class="status-badge new">新</span>
                    </div>
                    <h3 class="card-title">✅ 确认框</h3>
                    <p class="card-description">功能完整的确认框组件，支持多种类型和自定义按钮</p>
                    <div class="card-features">
                        <span class="feature-tag">多种类型</span>
                        <span class="feature-tag">自定义按钮</span>
                        <span class="feature-tag">回调函数</span>
                        <span class="feature-tag">遮罩控制</span>
                    </div>
                    <div class="card-footer">
                        <a href="demo/confirm.html" class="btn btn-primary">查看演示</a>
                        <a href="blog-articles/v1.22.0-确认框组件.md" class="btn btn-secondary" target="_blank">阅读文章</a>
                    </div>
                </div>

                <!-- v1.23.0 - 通知组件 -->
                <div class="component-card" data-version="v1.23.0">
                    <div class="card-header">
                        <span class="version-badge">v1.23.0</span>
                        <span class="status-badge new">新</span>
                    </div>
                    <h3 class="card-title">🔔 通知组件</h3>
                    <p class="card-description">功能完整的通知组件，支持多种类型和自动关闭</p>
                    <div class="card-features">
                        <span class="feature-tag">多种类型</span>
                        <span class="feature-tag">自动关闭</span>
                        <span class="feature-tag">位置控制</span>
                        <span class="feature-tag">动画效果</span>
                    </div>
                    <div class="card-footer">
                        <a href="demo/notification.html" class="btn btn-primary">查看演示</a>
                        <a href="blog-articles/v1.23.0-通知组件.md" class="btn btn-secondary" target="_blank">阅读文章</a>
                    </div>
                </div>

                <!-- v1.24.0 - 警告框组件 -->
                <div class="component-card" data-version="v1.24.0">
                    <div class="card-header">
                        <span class="version-badge">v1.24.0</span>
                        <span class="status-badge new">新</span>
                    </div>
                    <h3 class="card-title">⚠️ 警告框组件</h3>
                    <p class="card-description">功能完整的警告框组件，支持多种警告类型</p>
                    <div class="card-features">
                        <span class="feature-tag">多种类型</span>
                        <span class="feature-tag">可关闭</span>
                        <span class="feature-tag">自定义内容</span>
                        <span class="feature-tag">动画效果</span>
                    </div>
                    <div class="card-footer">
                        <a href="demo/alert.html" class="btn btn-primary">查看演示</a>
                        <a href="blog-articles/v1.24.0-警告框组件.md" class="btn btn-secondary" target="_blank">阅读文章</a>
                    </div>
                </div>

                <!-- v1.25.0 - 消息框组件 -->
                <div class="component-card" data-version="v1.25.0">
                    <div class="card-header">
                        <span class="version-badge">v1.25.0</span>
                        <span class="status-badge new">新</span>
                    </div>
                    <h3 class="card-title">💬 消息框组件</h3>
                    <p class="card-description">功能完整的消息框组件，支持多种消息类型</p>
                    <div class="card-features">
                        <span class="feature-tag">多种类型</span>
                        <span class="feature-tag">自动关闭</span>
                        <span class="feature-tag">位置控制</span>
                        <span class="feature-tag">队列管理</span>
                    </div>
                    <div class="card-footer">
                        <a href="demo/message.html" class="btn btn-primary">查看演示</a>
                        <a href="blog-articles/v1.25.0-消息框组件.md" class="btn btn-secondary" target="_blank">阅读文章</a>
                    </div>
                </div>

                <!-- v1.26.0 - 加载指示器组件 -->
                <div class="component-card" data-version="v1.26.0">
                    <div class="card-header">
                        <span class="version-badge">v1.26.0</span>
                        <span class="status-badge new">新</span>
                    </div>
                    <h3 class="card-title">⏳ 加载指示器组件</h3>
                    <p class="card-description">功能完整的加载指示器组件，支持多种动画</p>
                    <div class="card-features">
                        <span class="feature-tag">多种动画</span>
                        <span class="feature-tag">自定义颜色</span>
                        <span class="feature-tag">多种大小</span>
                        <span class="feature-tag">灵活配置</span>
                    </div>
                    <div class="card-footer">
                        <a href="demo/spinner.html" class="btn btn-primary">查看演示</a>
                        <a href="blog-articles/v1.26.0-加载指示器组件.md" class="btn btn-secondary" target="_blank">阅读文章</a>
                    </div>
                </div>

                <!-- v1.27.0 - 分割线组件 -->
                <div class="component-card" data-version="v1.27.0">
                    <div class="card-header">
                        <span class="version-badge">v1.27.0</span>
                        <span class="status-badge new">新</span>
                    </div>
                    <h3 class="card-title">📏 分割线组件</h3>
                    <p class="card-description">功能完整的分割线组件，支持多种方向和样式</p>
                    <div class="card-features">
                        <span class="feature-tag">水平/垂直</span>
                        <span class="feature-tag">多种样式</span>
                        <span class="feature-tag">自定义颜色</span>
                        <span class="feature-tag">文字支持</span>
                    </div>
                    <div class="card-footer">
                        <a href="demo/divider.html" class="btn btn-primary">查看演示</a>
                        <a href="blog-articles/v1.27.0-分割线组件.md" class="btn btn-secondary" target="_blank">阅读文章</a>
                    </div>
                </div>

                <!-- v1.28.0 - 间距组件 -->
                <div class="component-card" data-version="v1.28.0">
                    <div class="card-header">
                        <span class="version-badge">v1.28.0</span>
                        <span class="status-badge new">新</span>
                    </div>
                    <h3 class="card-title">📐 间距组件</h3>
                    <p class="card-description">功能完整的间距组件，支持多种间距大小</p>
                    <div class="card-features">
                        <span class="feature-tag">多种大小</span>
                        <span class="feature-tag">方向控制</span>
                        <span class="feature-tag">响应式</span>
                        <span class="feature-tag">灵活配置</span>
                    </div>
                    <div class="card-footer">
                        <a href="demo/space.html" class="btn btn-primary">查看演示</a>
                        <a href="blog-articles/v1.28.0-间距组件.md" class="btn btn-secondary" target="_blank">阅读文章</a>
                    </div>
                </div>

                <!-- v1.29.0 - 图标组件 -->
                <div class="component-card" data-version="v1.29.0">
                    <div class="card-header">
                        <span class="version-badge">v1.29.0</span>
                        <span class="status-badge new">新</span>
                    </div>
                    <h3 class="card-title">🎨 图标组件</h3>
                    <p class="card-description">功能完整的图标组件，包含 100+ 精选图标</p>
                    <div class="card-features">
                        <span class="feature-tag">100+ 图标</span>
                        <span class="feature-tag">自定义大小</span>
                        <span class="feature-tag">自定义颜色</span>
                        <span class="feature-tag">SVG 格式</span>
                    </div>
                    <div class="card-footer">
                        <a href="demo/icon.html" class="btn btn-primary">查看演示</a>
                        <a href="blog-articles/v1.29.0-图标组件.md" class="btn btn-secondary" target="_blank">阅读文章</a>
                    </div>
                </div>

                <!-- v1.30.0 - 弹性布局组件 -->
                <div class="component-card" data-version="v1.30.0">
                    <div class="card-header">
                        <span class="version-badge">v1.30.0</span>
                        <span class="status-badge new">新</span>
                    </div>
                    <h3 class="card-title">📦 弹性布局组件</h3>
                    <p class="card-description">功能完整的弹性布局组件，支持 Flexbox 布局</p>
                    <div class="card-features">
                        <span class="feature-tag">Flexbox</span>
                        <span class="feature-tag">方向控制</span>
                        <span class="feature-tag">对齐控制</span>
                        <span class="feature-tag">响应式</span>
                    </div>
                    <div class="card-footer">
                        <a href="demo/flex.html" class="btn btn-primary">查看演示</a>
                        <a href="blog-articles/v1.30.0-弹性布局组件.md" class="btn btn-secondary" target="_blank">阅读文章</a>
                    </div>
                </div>
            </section>

            <!-- 统计信息 -->
            <section class="stats-section">
                <div class="stat-item">
                    <div class="stat-number">30</div>
                    <div class="stat-label">已发布组件</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">0</div>
                    <div class="stat-label">开发中</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">30</div>
                    <div class="stat-label">总计</div>
                </div>
            </section>
        </main>

        <footer class="footer">
            <p>&copy; 2025 OpenHarmony 三方库适配中心 | MIT License</p>
        </footer>
    </div>

    <script>
        // 搜索功能
        document.getElementById('componentSearch').addEventListener('input', function(e) {
            const keyword = e.target.value.toLowerCase();
            const cards = document.querySelectorAll('.component-card');
            
            cards.forEach(card => {
                const title = card.querySelector('.card-title').textContent.toLowerCase();
                const description = card.querySelector('.card-description').textContent.toLowerCase();
                
                if (title.includes(keyword) || description.includes(keyword)) {
                    card.style.display = '';
                } else {
                    card.style.display = 'none';
                }
            });
        });
    </script>
</body>
</html>
